import React, { FC, useEffect, useState } from 'react'
// import { getQuestionService } from '../../../services/question'
// import { useParams } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { changeSelectedId } from '../../../store/componentsReducer'
import useLoadQuestionData from '../../../hooks/useLoadQuestionData'
import styles from './index.module.scss'

import EditHeader from './EditHeader'
import LeftPanel from './LeftPanel'
import RightPanel from './RightPanel'
import EditCanvas from './EditCanvas'

const Edit: FC = () => {
  // const { id = '' } = useParams()
  // const [loading, setLoading] = useState(true)
  // const [question, setQuestion] = useState({})

  // useEffect(() => {
  //   async function fn() {
  //     const data = await getQuestionService(id)
  //     console.log(data)
  //     setQuestion(data)
  //     setLoading(false)
  //   }
  //   fn()
  // }, [])
  const dispatch = useDispatch()
  const { loading } = useLoadQuestionData()
  function clearSelected() {
    dispatch(changeSelectedId(''))
  }
  return (
    <div className={styles.container}>
      <EditHeader />
      <div className={styles['cotent-wrapper']}>
        <div className={styles.content}>
          <div className={styles.left}>
            <LeftPanel />
          </div>
          <div className={styles.main} onClick={clearSelected}>
            <div className={styles['canvas-wrapper']}>
              <EditCanvas loading={loading} />
            </div>
          </div>
          <div className={styles.right}>
            <RightPanel />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Edit
